<template>
  <div class="myminu">
    <h3>必备工具</h3>
    <div class="mintop">
      <div class="box" @click="change(index)" v-for="(item,index) in arr" :key="index">
        <img :src="item.pic" alt="">
        <span>{{item.text}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { pic: 'https://image.suning.cn/uimg/cms/img/157250874743127029.png', text: '红包' },
        { pic: 'https://image.suning.cn/uimg/cms/img/157250876042530564.png', text: '店铺关注' },
        { pic: 'https://image.suning.cn/uimg/cms/img/160266084132266426.png', text: '我的预约' },
        { pic: 'https://image.suning.cn/uimg/cms/img/157136450994431031.png', text: '客户服务' },
        { pic: 'https://image.suning.cn/uimg/cms/img/157251063564774447.png', text: '必抢清单' },
        { pic: 'https://image.suning.cn/uimg/cms/img/157136454213083878.png', text: '拼购' },
        { pic: 'https://image.suning.cn/uimg/cms/img/157136454213083878.png', text: '校园VIP' },
        { pic: 'https://image.suning.cn/uimg/cms/img/157136448419617333.png', text: '我的使用' },
      ]
    }
  },
  methods: {
    change(x) {
      if (x == 1) {
        this.$router.push('/StoreAttention');
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.myminu {
  width: 3.52rem;
  height: 1.9rem;
  margin: 0rem 0.12rem 0.1rem 0.12rem;
  background-color: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
  h3{
    font-size: 0.1rem;
    margin:0.14rem 0rem 0.23rem  0.14rem;
  }
  .mintop{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    .box{
      width: 23%;
      height: 0.46rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 0.3rem;
      span {
          font-size: 0.12rem;
        }
      
        img {
          width: 0.24rem;
          height: 0.24rem;
        }
    }
  }
}
</style>
